import React, { useState } from "react";
import { Card, AttackPhase } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

const { allAttackPhases, unbrokenAttackPhases, brokenAttackPhases } =
  AttackPhase;

export default TimeRangePanel;

function TimeRangePanel() {
  const [phase, setPhase] = useState(allAttackPhases);
  const [isBroken, setIsBroken] = useState();
  const onChange = (phase, isBroken) => {
    setPhase(phase);
    setIsBroken(isBroken);
  };
  const onPopoverJump = (type) => {
    window.open(`/alarm/alarm_alarm/alarm_alarm_list?type=${type}`);
  };
  const mockData = {
    control: 3,
  };

  const data = {
    title: "AttackPhase组件",
    descriptions: ["一个纯粹的业务类型组件"],
    content: {
      title: "代码演示",
      children: [
        {
          title: "攻击链",
          descriptions: `当前选择攻击阶段:  ${
            phase && JSON.stringify(phase)
          }, 失陷状态：${JSON.stringify(isBroken)}`,
          component: (
            <Card>
              <AttackPhase
                value={phase}
                onChange={onChange}
                phaseCount={{
                  control: 1,
                  delivery: 2,
                  goal: 3,
                  intrusion: 4,
                  lateral: 5,
                  recon: 6,
                }}
              />
            </Card>
          ),
          codeSnippet: `import { AttackPhase } from '@ct0/ui'

ReactDOM.render(
    <AttackPhase
     onChange={onChange} 
     phaseCount={{
          control: 1,
          delivery: 2,
          goal: 3,
          intrusion: 4,
          lateral: 5,
          recon: 6
      }}
    />,
    mountNode
)
`,
        },
        {
          title: "攻击链-popover显示",
          descriptions: `当前选择攻击阶段:  ${
            phase && JSON.stringify(phase)
          }, 失陷状态：${JSON.stringify(isBroken)}`,
          component: (
            <Card>
              <AttackPhase
                value={phase}
                phaseCount={{
                  control: 1,
                  delivery: 2,
                  goal: 3,
                  intrusion: 4,
                  lateral: 5,
                  recon: 6,
                }}
                popoverVisible={true}
                onPopoverJump={onPopoverJump}
              />
            </Card>
          ),
          codeSnippet: `import { AttackPhase } from '@ct0/ui'

ReactDOM.render(
    <AttackPhase
     popoverVisible
     onPopoverJump={onPopoverJump}
     phaseCount={{
          control: 1,
          delivery: 2,
          goal: 3,
          intrusion: 4,
          lateral: 5,
          recon: 6
      }}
    />,
    mountNode
)
`,
        },
        {
          title: "隐藏legend",
          component: (
            <Card>
              <AttackPhase legendVisible={false} value={unbrokenAttackPhases} />
            </Card>
          ),
          codeSnippet: `import { AttackPhase } from '@ct0/ui'

ReactDOM.render(
    <AttackPhase legendVisible={false} />,
    mountNode
)
`,
        },
        {
          title: "自定义legend名称和阶段名称",
          component: (
            <Card>
              <AttackPhase
                value={brokenAttackPhases}
                phaseCount={mockData}
                legendUnbrokenName="legend1"
                legendBrokenName="legend2"
                phaseNames={{
                  control: "control",
                  delivery: "delivery",
                  goal: "goal",
                  intrusion: "intrusion",
                  lateral: "lateral",
                  recon: "recon",
                }}
              />
            </Card>
          ),
          codeSnippet: `import { AttackPhase } from '@ct0/ui'

ReactDOM.render(
    <AttackPhase 
        legendUnbrokenName="legend1"
        legendBrokenName="legend2"
        phaseNames={{
          control: "control",
          delivery: "delivery",
          goal: "goal",
          intrusion: "intrusion",
          lateral: "lateral",
          recon: "recon"
        }}
    />,
    mountNode
)
`,
        },
        {
          title: "获取不同结果的攻击阶段数据",
          descriptions: "",
          codeSnippet: `import { AttackPhase } from '@ct0/ui'

const { allAttackPhases, unbrokenAttackPhases, brokenAttackPhases } = AttackPhase
`,
        },
      ],
    },
    componentApi: [
      {
        param: "value",
        description: "已选择的攻击阶段",
        type: "Phase[]",
        default: `[]`,
        required: false,
      },
      {
        param: "className",
        description: "chartContainer的附加class",
        type: "string",
        default: "",
        required: false,
      },
      {
        param: "onChange",
        description: "回调函数",
        type: "(value: Phase[], isBroken: boolean | undefined) => void",
        default: "",
        required: false,
      },
      {
        param: "phaseCount",
        description: "攻击阶段数据",
        type: "PhaseCount",
        default: "",
        required: false,
      },
      {
        param: "phaseNames",
        description: "自定义攻击阶段名称",
        type: "PhaseNames",
        default: `{
                recon: "侦查",
                delivery: "载荷投递",
                intrusion: "入侵",
                control: "命令与控制",
                lateral: "内网横向",
                goal: "达成目标"
            }`,
        required: false,
      },
      {
        param: "legendBrokenName",
        description: "自定义失陷legend名称",
        type: "string",
        default: `已失陷`,
        required: false,
      },
      {
        param: "legendUnbrokenName",
        description: "自定义未失陷legend名称",
        type: "string",
        default: `未失陷`,
        required: false,
      },
      {
        param: "legendVisible",
        description: "是否显示legend",
        type: "boolean",
        default: "true",
        required: false,
      },
    ],
  };

  return <PanelTemplate {...data} />;
}
